<template>
  <div class="nav">
    <div class="avater">
      <img :src="imgUrl" class="image" @click="gocount" />
      <strong>{{ this.$store.state.user.nickName }}</strong>
    </div>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-menu-item index="/mine/count">
        <i class="el-icon-menu"></i>
        <span slot="title">账号设置</span>
      </el-menu-item>
      <el-menu-item index="/mine/goods">
        <i class="el-icon-edit-outline"></i>
        <span slot="title">商品上传</span>
      </el-menu-item>
      <el-menu-item v-if="$store.state.user.role != 'user'" index="/mine/users">
        <i class="el-icon-s-check"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <!-- <el-submenu index="/mine/category">
         -->
      <el-menu-item
        v-if="$store.state.user.role != 'user'"
        index="/mine/category"
      >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>分类管理</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/mine/wait">
        <i class="el-icon-s-goods"></i>我的出售</el-menu-item
      >
      <el-menu-item index="/mine/cart"
        ><i class="el-icon-star-on"></i>我的收藏</el-menu-item
      >
      <el-menu-item index="/mine/orders"
        ><i class="el-icon-location"></i>{{ "我的订单" }}</el-menu-item
      >
      <el-menu-item v-if="$store.state.user.role != 'user'" index="/mine/admin"
        ><i class="el-icon-location"></i>{{ "订单管理" }}</el-menu-item
      >
      <el-menu-item index="/mine/suggest">
        <i class="el-icon-document"></i>
        <span slot="title">投诉建议</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "Mine",
  data() {
    return {
      imgUrl: process.env.VUE_APP_BASE_API + this.$store.state.user.avatar,
      activeIndex: "1",
      activeIndex2: "1",
    };
  },
  computed: {},
  watch: {},

  methods: {
    gocount() {
      this.$router.push("/mine/count");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
.avater {
  height: 140px;
  color: white;
  line-height: 0px;
  background-color: #434a50;
  cursor: pointer;
}
.avater img {
  margin-top: 20px;
  border-radius: 50px;
  height: 64px;
  width: 64px;
}
.avater strong {
  display: block;
  line-height: 50px;
  text-align: center;
  font-size: 17px;
}
.nav {
  width: 100%;
  height: 100%;
}
.el-menu {
  height: 100%;
}
</style>